<template>
  <div id="profits">
    <div class="profits-header">
        <span class="instructions">
        分红规则：ONEBET持有量/ONEBET流通量 *平台盈利总额* 分红比例
      </span>
    </div>
    <div class="profits-tabs">
      <div class="profits-tabs-header">
        <ul>
          <li>日期</li>
          <li>ONEBET持有量</li>
          <li>昨日分红</li>
        </ul>

      </div>
      <div class="profits-tabs-cont">
        <ul v-if="profitsList.value&&profitsList.value.length>0">
          <li v-for="(item,index) in profitsList.value" :key="index">
            <span>{{item.date}}</span>
            <span>{{item.onebetAmount}}</span>
            <span>{{item.dividend}}{{item.coinType}}</span>
          </li>
        </ul>
        <div class="notice-page">
          <el-pagination
            background
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page.sync="profitsList.pageNum"
            :page-size="profitsList.pageSize"
            :total="profitsList.totalCount"
            layout="prev, pager, next"
          >
          </el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  import Api from '@/axios/api/api'

  export default {
    name: 'profits',
    data() {
      return {
        profitsList: {
          totalCount: null, // 总条数
          pageNum: 1, // 当前显示页号
          pageSize: 10, // 每页显示数据条数
          value: []
        }
      }
    },
    methods: {
      getHeaderdata() {
        let params = {
          pageSize: this.profitsList.pageSize,
          pageNum: this.profitsList.pageNum
        }
        Api.getProfits(params).then(res => {
          let result = res.data
          if (result.code === 0) {
            this.profitsList.totalCount = result.data.totalCount
            this.profitsList.value = result.data.data
          } else {
            this.$message.error(result.message)
          }
        })
      },
      handleSizeChange(val) {
        console.log(`每页 ${val} 条`)
      },
      handleCurrentChange(pageNumber) {
        this.profitsList.pageNum = pageNumber
        this.getHeaderdata()
      }
    },
    mounted() {
      this.getHeaderdata()
    }
  }
</script>

<style lang="less" scoped>
  #profits {
    width: 100%;
    height: auto;
    display: block;
    overflow: hidden;
    .profits-header {
      width: 100%;
      height: 50px;
      display: block;
      overflow: hidden;
      font-family: PingFangSC-Regular;
      font-size: 16px;
      > span {
        width: 100%;
        height: auto;
        line-height: 50px;
        display: block;
        overflow: hidden;
        font-size: 16px;
        padding: 0 10px;
        box-sizing: border-box;
      }
      .instructions {
        color: #000000;
        text-align: center;
      }
    }
    .profits-tabs {
      width: 100%;
      height: auto;
      display: block;
      overflow: hidden;
      .profits-tabs-header {
        width: 100%;
        height: 76px;
        display: block;
        overflow: hidden;
        padding: 0 38px;
        box-sizing: border-box;
        background: #8638FD;
        color: #ffffff;
        > ul {
          width: 100%;
          height: 76px;
          display: block;
          overflow: hidden;
          > li {
            width: 33.33%;
            height: 76px;
            line-height: 76px;
            float: left;
            font-family: PingFangSC-Medium;
            font-size: 18px;
            color: #ffffff;
            text-align: center;
          }
        }
      }
      .profits-tabs-cont {
        width: 100%;
        height: auto;
        display: block;
        overflow: hidden;
        padding-bottom: 20px;
        > ul {
          width: 100%;
          height: auto;
          display: block;
          overflow: hidden;
          padding: 0 38px;
          padding-bottom: 29px;
          box-sizing: border-box;
          > li {
            width: 100%;
            height: 64px;
            line-height: 64px;
            display: block;
            overflow: hidden;
            border-bottom: 1px solid #D8D8D8;
            > span {
              width: 33.33%;
              height: 64px;
              line-height: 64px;
              float: left;
              font-family: PingFangSC-Regular;
              font-size: 16px;
              color: #000000;
              text-align: center;
            }
          }
        }
      }
    }
  }
</style>
